<template>
  <div id="app">
    <div class="main-contaniner">
      <div class="main-herder">
        <div class="herder-title">
          <el-icon>
            <leadsIcon color="#303133" />
          </el-icon>
          <span class="title">线索管理</span>
        </div>
        <div class="herder-menu">
          <el-button
            type="primary"
            :icon="Edit"
            color="#0052CC"
            @click="openInsertDialog('新建线索')"
          >
            新建线索
          </el-button>
          <el-button type="primary" :icon="checkDuplicateIcon" color="#EBECF0">
            查重
          </el-button>
          <el-button
            type="primary"
            :icon="importIcon"
            color="#EBECF0"
            class="btnRotate"
          />
          <el-button
            type="primary"
            :icon="exportIcon"
            color="#EBECF0"
            class="btnRotate"
          />
        </div>
      </div>
      <div class="main-nav">
        <el-row>
          <el-col :span="4">
            <el-input
              style="min-width: 220px"
              placeholder="线索名称/手机/电话"
              v-model="conditions"
            >
              <template #append>
                <el-button :icon="Search" @click="loadLeads" />
              </template>
            </el-input>
          </el-col>
          <el-col :span="17">
            <div class="label-tabs">
              <span>显示:</span>
              <el-button color="#344563">全部线索</el-button>
              <el-button color="#EBECF0">我负责的线索</el-button>
              <el-button color="#EBECF0">下属负责的线索</el-button>
              <el-button color="#EBECF0">我关注的线索</el-button>
              <el-button color="#EBECF0">已转化的线索</el-button>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="left-btn">
              <el-button type="primary" :icon="Edit" color="#EBECF0">
                高级筛选
              </el-button>
              <el-button type="primary" :icon="Edit" color="#EBECF0" />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="main-content">
        <div class="table-container">
          <el-table
            border
            style="width: 100%; height: 100%"
            height="32"
            :data="leadsData"
            @row-click="handleCurrentChange"
          >
            <template #empty>
              <div class="empty-status">
                <el-text>暂无数据</el-text>
                <el-button
                  color="#0052CC"
                  type="primary"
                  @click="openInsertDialog('新建线索')"
                >
                  新建线索
                </el-button>
              </div>
            </template>
            <el-table-column type="selection" width="55" />
            <el-table-column
              fixed
              label="线索名称"
              width="154"
              prop="leadsName"
            />
            <el-table-column label="线索来源" width="154">
              <template #default="{ row }">
                {{
                  row.leadsSource === 1
                    ? '促销'
                    : row.leadsSource === 2
                      ? '搜索引擎'
                      : row.leadsSource === 3
                        ? '广告'
                        : '转介绍'
                }}
              </template>
            </el-table-column>
            <el-table-column label="手机" width="124" prop="phone" />
            <el-table-column label="电话" width="124" prop="telephone" />
            <el-table-column label="邮箱" width="124" prop="email" />
            <el-table-column label="地址" width="300" prop="address" />
            <el-table-column label="客户行业" width="154">
              <template #default="{ row }">
                {{
                  row.customerField === 1
                    ? 'IT'
                    : row.customerField === 2
                      ? '金融'
                      : row.customerField === 3
                        ? '电子商务'
                        : '房地产'
                }}
              </template>
            </el-table-column>
            <el-table-column label="客户级别" width="154">
              <template #default="{ row }">
                {{
                  row.customerLevel === 1
                    ? '重点客户'
                    : row.customerLevel === 2
                      ? '普通客户'
                      : '非优先客户'
                }}
              </template>
            </el-table-column>
            <el-table-column label="下次联系时间" width="184" prop="nextTime" />
            <el-table-column label="备注" width="124" prop="remarks" />
            <el-table-column label="最后跟进时间" width="184" prop="lastTime" />
            <el-table-column
              label="最后跟进记录"
              width="184"
              prop="lastContent"
            />
            <el-table-column label="负责人" width="124" prop="ownerUserName" />
            <el-table-column
              label="距进入线索池天数"
              width="154"
              prop="daysSincePool"
            />
            <el-table-column
              label="所属部门"
              width="154"
              prop="departmentName"
            />
            <el-table-column label="更新时间" width="154" prop="updateTime" />
            <el-table-column label="创建时间" width="154" prop="createTime" />
            <el-table-column label="创建人" width="124" prop="createUserName" />
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            @change="loadLeads"
            v-model:current-page="pager.current"
            v-model:page-size="pager.size"
            :page-sizes="[3, 5, 10, 20]"
            :page-count="pager.pages"
            :total="pager.total"
            layout="prev, pager, next, sizes, total, jumper"
          />
        </div>
      </div>
    </div>
    <RedactDiadog
      v-model="insertVsible"
      :title="dialogTitle"
      :onCancel="close"
      :onSubmit="handleData"
    >
      <template #form>
        <LeadsInsertForm ref="leadsInsertForm" />
      </template>
    </RedactDiadog>
    <RedactDiadog
      v-model="updataVsible"
      :title="dialogTitle"
      :onCancel="close"
      :onSubmit="handleData"
    >
      <template #form>
        <LeadsUpdataForm
          ref="leadsUpdataForm"
          :title="dialogTitle"
          :current-data="editTableCurrentRowData"
        />
      </template>
    </RedactDiadog>
    <el-drawer
      v-model="drawer"
      size="73%"
      :show-close="false"
      :withHeader="false"
      style="background-color: #f4f9fc"
    >
      <CommonDrawer :menu="asideMenu" :change-card="changeCard">
        <template #base-body>
          <LeadsBaseInfo
            :data="tableCurrentRowData"
            :open-updata-dialog="openUpdataDialog"
            :delete-data="deleteData"
            :transfer-owner-user="transferOwnerUser"
          />
        </template>
        <template #detail-body>
          <component
            :is="components[currentComponent]"
            :data="tableCurrentRowData"
          />
        </template>
      </CommonDrawer>
    </el-drawer>
    <OwnerUpdata
      v-model="ownerUpdataVisible"
      :onCancel="close"
      :onSubmit="handleOwnerUser"
      ref="ownerUpdata"
    />
  </div>
</template>
<script setup>
import checkDuplicateIcon from '@/assets/font/checkDuplicateIcon.vue'
import exportIcon from '@/assets/font/exportIcon.vue'
import importIcon from '@/assets/font/importIcon.vue'
import leadsIcon from '@/assets/font/leadsIcon.vue'
import { Edit, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import LeadsInsertForm from '@/components/form/LeadsInsertForm.vue'
import {
  getLeadsList,
  saveLeads,
  updateLeads,
  deleteLeads,
  updataOwnerUser,
} from '@/api/leads'
import RedactDiadog from '@/components/RedactDiadog.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import LeadsUpdataForm from '@/components/form/LeadsUpdataForm.vue'
import CommonDrawer from '@/components/CommonDrawer.vue'
import LeadsFollowupCom from '@/components/LeadsFollowupCom.vue'
import LeadsBaseInfo from '@/components/LeadsBaseInfo.vue'
import LeadsDetailInfo from '@/components/LeadsDetailInfo.vue'
import FileInfo from '@/components/FileInfo.vue'
import OwnerUpdata from '@/components/OwnerUpdata.vue'

let components = {
  LeadsDetailInfo: LeadsDetailInfo,
  LeadsFollowupCom: LeadsFollowupCom,
  FileInfo: FileInfo,
}
let currentComponent = ref('LeadsFollowupCom')

const asideMenu = ref([
  {
    label: '活动',
    component: 'LeadsFollowupCom',
  },
  {
    label: '详细资料',
    component: 'LeadsDetailInfo',
  },
  {
    label: '附件',
    component: 'FileInfo',
  },
  {
    label: '操作记录',
    component: 'FileInfo',
  },
])
const insertVsible = ref(false)
const updataVsible = ref(false)
const ownerUpdataVisible = ref(false)
const drawer = ref(false)
const leadsInsertForm = ref(null)
const leadsUpdataForm = ref(null)
const leadsData = ref([])
const conditions = ref('')
const tableCurrentRowData = ref({})
const editTableCurrentRowData = ref({})
const dialogTitle = ref('')
const isEdit = ref(false)
let pager = ref({})
const ownerUpdata = ref(null)

function openInsertDialog(title) {
  insertVsible.value = true
  isEdit.value = false
  dialogTitle.value = title
}

function openUpdataDialog() {
  editTableCurrentRowData.value = { ...tableCurrentRowData.value }
  updataVsible.value = true
  dialogTitle.value = '编辑线索'
}

function close() {
  insertVsible.value = false
  updataVsible.value = false
  ownerUpdataVisible.value = false
}

function loadLeads() {
  getLeadsList({
    conditions: conditions.value,
    current: pager.value.current,
    size: pager.value.size,
  }).then((result) => {
    console.log(result.data.records)
    leadsData.value = result.data.records
    pager.value = {
      pages: result.data.pages,
      current: result.data.current,
      total: result.data.total,
      size: result.data.size,
    }
  })
}
loadLeads()

function handleData() {
  if (!isEdit.value) {
    console.log('负责人', leadsInsertForm.value.leadsData)
    saveLeads(leadsInsertForm.value.leadsData).then((result) => {
      console.log(result)
      if (result.code == 200) {
        close()
        loadLeads()
      }
    })
    return
  }
  console.log('编辑')
  updateLeads(leadsUpdataForm.value.leadsData).then((result) => {
    if (result.code == 200) {
      close()
      refCurrentData()
      loadLeads()
    }
  })
}

function handleCurrentChange(currentRow) {
  tableCurrentRowData.value = { ...currentRow }
  tableCurrentRowData.value.type = '1'
  isEdit.value = true
  drawer.value = true
}

function deleteData() {
  console.log(tableCurrentRowData.value)
  ElMessageBox.confirm('确定删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: (action) => {
      console.log(action)
      if (action === 'confirm') {
        deleteLeads(tableCurrentRowData.value.leadsNo).then((result) => {
          if (result.code == 200) {
            ElMessage.success('删除成功')
            drawer.value = false
            loadLeads()
          }
        })
      }
    },
  })
}

function changeCard(component) {
  currentComponent.value = component
}

function transferOwnerUser() {
  ownerUpdataVisible.value = true
}

function handleOwnerUser() {
  updataOwnerUser({
    ownerUserId: ownerUpdata.value.selectedUser,
    leadsNo: tableCurrentRowData.value.leadsNo,
  }).then((res) => {
    if (res.code === 200) {
      ownerUpdataVisible.value = false
      refCurrentData()
      loadLeads()
    }
  })
}

let refCurrentData = () => {
  let id = tableCurrentRowData.value.leadsNo
  getLeadsList({ id }).then((result) => {
    console.log(result.data.records)
    tableCurrentRowData.value = { ...result.data.records[0] }
  })
}
</script>
<style scoped lang="scss">
.main-contaniner {
  padding: 24px 40px 0 40px;
  background-color: #f4f5f7;
}

.main-herder {
  align-items: center;
  display: flex;
  text-align: left;
  justify-content: space-between;
  padding-bottom: 16px;
}

.main-nav {
  padding-bottom: 16px;
}

.main-content {
  background-color: white;
  height: calc(100vh - 179px);
}

.table-container {
  height: calc(100% - 68px);
}

.empty-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pagination-container {
  height: 32px;
  padding: 16px;
  display: flex;
  justify-content: right;
}

.herder-title {
  font-size: 24px;
  align-items: center;
  display: flex;
  text-align: left;
}

.title {
  margin: 0 4px;
}

.btnRotate {
  transform: rotate(90deg);
  width: 32px;
  height: 30px;
}

.label-tabs {
  margin-left: 24px;
}

.left-btn {
  /* 子元素靠右 */
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.dialog-header {
  border-radius: 20px 20px 0 0;
  height: 53px;
  line-height: 53px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.dialog-header span:last-child .el-icon {
  color: #333;
  transition: color 0.3s;
}

.dialog-header span:last-child .el-icon:hover {
  color: #0052cc;
}

.drawer-container {
  height: calc(100vh - 40px);
}

.main-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

:deep(
  .el-tabs--left .el-tabs__nav-wrap.is-left:after,
  .el-tabs--left .el-tabs__nav-wrap.is-right:after,
  .el-tabs--right .el-tabs__nav-wrap.is-left:after,
  .el-tabs--right .el-tabs__nav-wrap.is-right:after
) {
  display: none;
}

:deep(.el-tabs__active-bar.is-left) {
  /* display: none; */
  background-color: #f4f9fc;
  /* border: ; */
}

.tabs-item {
  align-items: center;
  box-sizing: border-box;
  color: var(--el-text-color-primary);
  display: flex;
  font-size: var(--el-font-size-base);
  font-weight: 500;
  height: var(--el-tabs-header-height);
  justify-content: center;
  list-style: none;
  padding: 0 20px;
  position: relative;
}

.item-text {
  background-color: #ebecf0;
  border-radius: 4px;
  height: 25px;
  line-height: 25px;
  padding: 0 4px;
  width: 56px;
  color: black;
}

.tabs-item:after {
  background-color: #e4e9f2;
  border-radius: 4px;
  content: '';
  height: 8px;
  position: absolute;
  right: 2px;
  top: 15px;
  width: 8px;
  z-index: 1;
}

.tabs-item:hover .item-text {
  background-color: var(--el-text-color-primary);
  color: white;
}

.item-header {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  margin: 16px 8px 0;
  overflow: hidden;
  padding: 16px;
}

.detail-header {
  padding: 0;
}

.detail-body {
  display: flex;
}

.detail-header-subtitle {
  color: #6b778c;
  font-size: 14px;
  margin-bottom: 2px;
}

.detail-header-body {
  align-items: center;
  display: flex;
  justify-content: space-between;
  text-align: left;
  width: 100%;
  flex-direction: row;
}

.detail-header-left,
.detail-header-right {
  align-items: center;
  display: flex;
}

.drawer-btn {
  width: 32px;
  height: 30px;
}

.detail-header-title {
  display: flex;
  font-size: 24px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.focus-icon {
  color: #dfe1e6;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  margin-left: 16px;
}

.detail-base {
  margin: 12px 0 0;
  width: auto;
  position: relative;
}

.base-item {
  align-items: center;
  display: flex;
  min-height: 24px;
  overflow: hidden;
}

.base-title {
  color: #6b778c;
  margin-right: 8px;
  font-size: 14px;
}

.text-one-line {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tags-content {
  margin-top: 8px;
}

.tag-view {
  display: flex;
  flex-wrap: wrap;
}

.tag-referene {
  border: none;
  width: 14px;
  height: 14px;
  padding: 2px;
}

.detail-body-left {
  flex: 1;
  min-width: 20px;
  width: 0;
}

.detail-body-main {
  height: auto;
  margin: 16px 8px;
  border-radius: 12px;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 2px 8px #172b4d1a;
  overflow: hidden;
}

.avatar {
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  margin-right: 8px;
  margin-top: 5px;
}

.log-add {
  align-items: center;
  display: flex;
  text-align: left;
  width: 100%;
}

.mix-content {
  color: #7a869a;
  cursor: text;
  padding: 0;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  position: relative;
  flex-direction: row;
  width: 100%;
}

.i-cont {
  line-height: 40px;
  padding: 0 24px;
}

.log {
  margin-top: 40px;
  position: relative;
}

.log-filter {
  height: 40px;
  width: 100%;
  align-items: center;
  display: flex;
  text-align: left;
  flex-direction: row;
  justify-content: space-between;
}

.filter-left {
  width: unset;
}

.filter-text {
  font-size: 14px;
}

.filter-right {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-drawer) {
  border-radius: 10px 0 0 10px;
}

:deep(.el-drawer__body) {
  padding: 0;
}

:deep(.el-overlay) {
  background-color: transparent !important;
}
</style>
